﻿<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/html">
<head>
    <#include "../common/header.ftl">
    <script src="/js/plugins/jquery-form/jquery.form.js"></script>
    <script src="/js/plugins/jquery-bootstrap/jquery.bootstrap.min.js"></script>
    <script src="/js/plugins/My97DatePicker/WdatePicker.js"></script>
</head>
<body>

<div class="container " style="margin-top: 20px">
    <#include "../common/top.ftl">
    <div class="row">
        <div class="col-sm-3">
        <#--设置当前要回显当前菜单,必须在载入菜单前完成设置-->
            <#assign menu="chart"/>
            <#include "../common/menu.ftl">
        </div>
        <div class="col-sm-9">
            <div class="row">
                <div class="col-sm-12">
                    <h1 class="page-head-line">客户报表</h1>
                </div>
            </div>
        <#-- 高级查询 -->
            <form class="form-inline" id="searchForm" action="/chart/list.do" method="post">
                <div class="form-group">
                    <label>销售员:</label>
                    <input type="text" class="form-control" name="keyword" style="width: 150px"
                           value="${(qo.keyword)!}" placeholder="请输入销售员姓名">
                </div>
                <div class="form-group">
                    <label>时间:</label>
                    <input type="text" class="form-control" name="beginDate" style="width: 150px"
                           value="<#if qo.beginDate??>${((qo.beginDate)?string("yyyy-MM-dd"))!}</#if>"
                           placeholder="请输入开始时间"> ~
                    <input type="text" class="form-control" name="endDate" style="width: 150px"
                           value="<#if qo.endDate??>${((qo.endDate)?string("yyyy-MM-dd"))!}</#if>"
                           placeholder="请输入结束时间">
                </div>
                <div class="form-group">
                    <label>分组类型:</label>
                    <select class="form-control" name="groupBy">
                        <option value="e.name">销售员</option>
                        <option value="DATE_FORMAT(c.input_time, '%Y')">年份</option>
                        <option value="DATE_FORMAT(c.input_time, '%Y-%m')">月份</option>
                        <option value="DATE_FORMAT(c.input_time, '%Y-%m-%d')">日期</option>
                    </select>
                    <script>
                        $("#searchForm select[name='groupBy']").val("${(qo.groupBy)!}");
                    </script>
                </div>
                <button type="submit" class="btn btn-primary">
                    <span class="glyphicon glyphicon-search"></span> 查询
                </button>
                <a role="button" class="btn btn-success barBtn">
                    <span class="glyphicon glyphicon-film"></span> 柱状图
                </a>
                <a role="button" class="btn btn-success pieBtn">
                    <span class="glyphicon glyphicon-film"></span> 饼状图
                </a>
            </form>

            <table class="table table-striped table-hover">
                <tr>
                    <th>编号</th>
                    <th>分组类型</th>
                    <th>新增客户数</th>

                </tr>
                <#list result as entity>
                    <tr>
                        <td>${(entity_index+1)!}</td>
                        <td>${(entity.groupBy)!}</td>
                        <td>${(entity.total)!}</td>

                    </tr>
                </#list>
            </table>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

        </div>
    </div>
</div>
<script>
    $(function () {
        // 日历插件
        $("#searchForm input[name='beginDate']").click(function () {
            WdatePicker({
                readOnly: true, //只读
                maxDate: new Date() //最多选到今天
            });
        });
        //endDate点击事件
        $("#searchForm input[name='endDate']").click(function () {
            WdatePicker({
                readOnly: true, //只读
                minDate: $("#searchForm input[name='beginDate']").val(),
                maxDate: new Date() //最多选到今天
            });
        });


        //显示柱状模态框
        $(".barBtn").click(function () {
            //清除模态框缓存
            $("#myModal").removeData("bs.modal");

            $("#myModal").modal({
                remote:"/chart/bar.do"
            });
        });

        //饼图模态框
        $(".pieBtn").click(function () {
            //清除模态框缓存
            $("#myModal").removeData("bs.modal");
            $("#myModal").modal({
                remote:"/chart/pie.do"
            })
        });


    });
</script>
</body>
</html>